	dojo.require("dojo.parser");
	
	dojo.require("dojo.data.ItemFileReadStore");
	dojo.require("dojo.dnd.move");
	dojo.require("dojo.dnd.Source");
	dojo.require("dojo.dnd.TimedMoveable");
	dojo.require("dojo.NodeList-traverse");
	
	dojo.require("dijit.DropDownMenu");
	dojo.require("dijit.Calendar");
	dojo.require("dijit.Dialog");
	dojo.require("dijit.Editor");
	dojo.require("dijit.form.Select");
	dojo.require("dijit.layout.ContentPane");
	dojo.require("dijit.layout.BorderContainer");
	dojo.require("dijit.layout.TabContainer");
	dojo.require("dijit.Menu");
	dojo.require("dijit.MenuBar");
	dojo.require("dijit.MenuItem");
	dojo.require("dijit.MenuSeparator");
	dojo.require("dijit.PopupMenuBarItem");
	dojo.require("dijit.TooltipDialog");
	dojo.require("dijit.form.ValidationTextBox");
	
	//dojo.require("dojox.mobile.parser");
	dojo.require("dojox.mobile");
	dojo.require("dojox.mobile.Button");
	dojo.require("dojox.mobile.Heading");
	dojo.require("dojox.mobile.ListItem");
	dojo.require("dojox.mobile.Overlay");
	dojo.require("dojox.mobile.RoundRect");
	dojo.require("dojox.mobile.RoundRectCategory");
//	dojo.require("dojox.mobile.RoundRectDataList");
	dojo.require("dojox.mobile.RoundRectList");
	dojo.require("dojox.mobile.SpinWheel");
	dojo.require("dojox.mobile.SpinWheelSlot");
	dojo.require("dojox.mobile.TabBar");
	dojo.require("dojox.mobile.TabBarButton");
	dojo.require("dojox.mobile.ToolBarButton");
	dojo.require("dojox.mobile.View");
	dojo.require("dojox.rpc.Rest");
	
	dojo.require("widgets.mobile.details.details");
	
	// If not a WebKit-based client, load compat
	dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");

	var temp;
	var numberOfPages = 0;
	var dialog;
	var elementsIdCounter = 0;
	
	//{element: element.attributes.id, id: mobileRoot.id, attributes:{}, children: []}
	var GUIDescriptor = new Array();

	//{entityName: "", attributes: [{attribute: ""}], relations: [{relatedEntity: "", multiplicity: "", relationName: ""}], objects: [{attribute: "", value: "" }] }
	var dataProvider = new Array();

	var button = {type: "input",	attributes: {id: "button", type: "button", value: "Button"}};
	var image = {type: "img",	attributes: {id: "image", src: "img/image.png"}};
	var label = {type: "div",	attributes: {id: "label", style: "border: 1px solid #454545; padding-left: 5px; color: #999999; width: 50px;", innerHTML: "Label"} };
	var textarea = {type: "textarea",	attributes: {id: "textarea", style: " max-width: 450px"}};
	var htmlElements = new Array(button,label,textarea);

	var calendar = {type: "div", constructor: function(attr, id){ return new dijit.Calendar(attr, id); },attributes : { id : "calendar", dojoType : "dijit.Calendar"} };
	var editor = {type: "div", constructor: function(attr, id){return new dijit.Editor(attr, id); }, attributes: {id: "editor", dojoType: "dijit.Editor", style: "width: 100px;", plugins: "['bold']"} };
	var widgetElements = new Array(calendar);
	
	var heading = 			{type: "h1", 	constructor: function(attr,id){return new dojox.mobile.Heading(attr,id);}, 				attributes: {id: "heading", label: "Heading", style: "width: 80%",} };
	var switcher = 			{type: "div", 	constructor: function(attr,id){return new dojox.mobile.Switch(attr, id);}, 				attributes: {id: "switcher", value: "on"}};
	var roundRectCategory = {type: "h2", 	constructor: function(attr,id){return new dojox.mobile.RoundRectCategory(attr,id);}, 	attributes: {id: "roundRectCategory", label: "RoundRectCategory", style: "background: #dddddd; width: 80%; padding-left: 3px; padding-top: 3px; ; min-height: 30px;"} };
	var roundRectList =		{type: "ul",	constructor: function(attr,id){return new dojox.mobile.RoundRectList(attr,id);},		attributes: {id: "roundRectList", style: "min-height: 30px; width: 80%; margin: 0;", innerHTML: "Round Rect List",  } };
//	var roundRectDataList =	{type: "ul",	constructor: function(attr,id){return new dojox.mobile.RoundRectDataList(attr,id);},	attributes: {id: "roundRectDataList", style: "min-height: 30px; width: 80%; margin: 0;", innerHTML: "Round Rect Data List",  } };
	var roundRect =			{type: "div",	constructor: function(attr,id){return new dojox.mobile.RoundRect(attr,id);},			attributes: {id: "roundRect", style: "min-height: 50px; width: 80%; margin: 0; padding: 0;", shadow: "true", innerHTML:"Round Rect",} };
	var mobileButton =		{type: "button",constructor: function(attr,id){return new dojox.mobile.Button(attr,id);},				attributes: {id: "mobileButton", label: "MobileButton",}	};
	var tabbar = 			{type: "ul",	constructor: function(attr,id){return new dojox.mobile.TabBar(attr,id);},				attributes: {id: "tabbar", style: "width: 80%;"}	};
	var tabbarButton = 		{type: "li",	constructor: function(attr,id){return new dojox.mobile.TabBarButton(attr,id);},			attributes: {id: "tabbarButton"}	};
	
	var details = 			{type: "div", constructor: function(attr, id){return new widgets.mobile.details.details(attr, id); }, attributes : { id : "details", style: "width: 80%;", title: "Details", imagePath: "dojo-release-1.7.1/dojo/widgets/mobile/details/default.jpg", items: [{leftLabel: 'Nome', rightLabel: 'Flavio'}, {leftLabel: 'Cognome', rightLabel: 'Silvestri'}]}, };
	
	var mobileElements = new Array(heading, tabbar, roundRect, switcher,roundRectCategory, roundRectList, mobileButton, details );

	var populateHTMLElements = function() {

		for ( var i = 0; i < htmlElements.length; i++) {

			var container = document.createElement("div");
			container.setAttribute("style", "min-height: 60px;");
			var add = dojo.create("div", {style : "width:18px; height:18px; border: 1px solid #454545; background:#272727; text-align: center; color: #e6e6e6; font-weight: bold; cursor: pointer; float: right; margin-right: 10px;",
								innerHTML : "+",
								onclick : "addHTMLElement(" + htmlElements[i].attributes.id + ");"
							});
			var element = dojo.create(htmlElements[i].type,	htmlElements[i].attributes);
			var br = document.createElement("br");

			container.appendChild(add);
			container.appendChild(element);
			container.appendChild(br);

			dojo.byId("htmlElementsContainer").appendChild(container);
		}
	};
	
	var populateWidgetElements = function() {

		for ( var i = 0; i < widgetElements.length; i++) {

			var container = document.createElement("div");
			var add = dojo.create("div", {style : "width:18px; height:18px; border: 1px solid #454545; background:#272727; text-align: center; color: #e6e6e6; font-weight: bold; cursor: pointer; float: right; margin-right: 10px;",
								innerHTML : "+",
								onclick : "addWidgetElement(" + widgetElements[i].attributes.id + ");"
							});
			var widgetRoot = document.createElement(widgetElements[i].type);
			widgetRoot.id = widgetElements[i].attributes.id;

			var br = document.createElement("br");

			container.appendChild(add);
			container.appendChild(widgetRoot);
			container.appendChild(br);

			dojo.byId("widgetElementsContainer").appendChild(container);

			eval(widgetElements[i].constructor)(widgetElements[i].attributes, widgetElements[i].attributes.id);
		}
	};
	
	var populateMobileElements = function(){
		
		for(var i=0; i<mobileElements.length; i++){
			
			var container = dojo.create("div",{}); //document.createElement("div");
			var add = dojo.create("div", {style : "width:18px; height:18px; border: 1px solid #454545; background:#272727; text-align: center; color: #e6e6e6; font-weight: bold; cursor: pointer; float: right; margin-right: 10px;",
								innerHTML : "+",
								onclick : "addMobileElement(" + mobileElements[i].attributes.id + ");"
							});
			
			var mobileRoot = dojo.create(mobileElements[i].type, {}); // document.createElement(mobileElements[i].type);
			mobileRoot.id = mobileElements[i].attributes.id;
			
			//var element = dojo.create(mobileElements[i].type, mobileElements[i].attributes);
			var br = document.createElement("br");
			
			container.appendChild(add);
			container.appendChild(mobileRoot);
			container.appendChild(br);

			dojo.byId("mobileElementsContainer").appendChild(container);
			
			eval(mobileElements[i].constructor)(mobileElements[i].attributes, mobileElements[i].attributes.id);
		}
		
	};
	
	var addHTMLElement = function(element){
		
		var pageSelected = "View"+dojo.byId(pageSelector).value;
		
		var addedElement = dojo.create(element.type, element.attributes);
		
		addedElement.id = addedElement.id + elementsIdCounter;
		elementsIdCounter++;
		
		dojo.byId(pageSelected).appendChild(addedElement);
		
		new dojo.dnd.move.parentConstrainedMoveable(
				addedElement, {
					area : "padding",
					within : true,
				});
		
		createElementMenu(addedElement);

	};
	
	var addWidgetElement = function(element){
		
		var pageSelected = "View"+dojo.byId(pageSelector).value;
		
		var widgetRoot = document.createElement(element.type);
		widgetRoot.id = element.attributes.id + String(elementsIdCounter);
		elementsIdCounter++;
		
		dojo.byId(pageSelected).appendChild(widgetRoot);
		eval(element.constructor)({}, widgetRoot.id);
		
		new dojo.dnd.move.parentConstrainedMoveable(
				widgetRoot.id, {
					area : "padding",
					within : true
				});
		
		createElementMenu(widgetRoot);
	};
	
	var addMobileElement = function(element){
		var pageSelected = "View"+dojo.byId(pageSelector).value;
		
		var mobileRoot = document.createElement(element.type);
		mobileRoot.id = element.attributes.id + String(elementsIdCounter);
		elementsIdCounter++;
		
		
		insertIntoGUIDescriptor(GUIDescriptor, {element: element.attributes.id, id: mobileRoot.id, attributes:{}, children: [], innerHTML: ""}, pageSelected);
		
		dojo.byId(pageSelected).appendChild(mobileRoot);
		var mobileElement = eval(element.constructor)({}, mobileRoot.id);
		mobileRoot.setAttribute("style", "min-height: 10px;");
		
		if(element.attributes.label != null ){
			mobileElement.set("label", mobileRoot.id);
			addAttributeToElementInGUIDescriptor(GUIDescriptor, "label", mobileRoot.id, mobileRoot.id);
		}
		
		createElementMenu(mobileRoot);
	};
	
	var addPage = function() {
		
		var pageRoot = document.createElement("div");
		pageRoot.id = "View" + String((numberOfPages + 1));
		
		dojo.byId("pages").appendChild(pageRoot);
		insertIntoGUIDescriptor(GUIDescriptor, {element: "view", id: pageRoot.id, attributes:{}, children: [], innerHTML: ""});
				
		new dojox.mobile.View({},pageRoot.id);
		
		if(pageRoot.id != "View1"){
			pageRoot.setAttribute("style", "width: 480px; height: 800px; background: #dddddd; display: none; left: 10px");
		}else{
			pageRoot.setAttribute("style", "width: 480px; height: 800px; background: #dddddd; left: 10px");
		}
		
		numberOfPages++;

		var pageSelector = dojo.byId("pageSelector");

		var pageNum = document.createElement("option");
		pageNum.setAttribute("value", String(numberOfPages));
		pageNum.innerHTML = String(numberOfPages);

		pageSelector.appendChild(pageNum);
		
		dojo.publish("/addNewWorkspacePage", {newPageNumber: numberOfPages} );
		
	};
	
	var selectPage = function(page) {

		var pages = dojo.byId("pages");

		for ( var i = 0; i < pages.children.length; i++) {
			if (pages.children[i].id != "View"+page) {
				pages.children[i].style.display = "none";
			} else {
				pages.children[i].style.display = "";
			}
		}
	};
	
	var launchDemo = function(){
		
		var duration = 1500;
		
		dojo.style("overlayer", "z-index", "99");
		dojo.style("overlayer", "opacity", "0");
	      var fadeArgs = {
	        node: "overlayer",
	        duration: duration,
	      };
	      dojo.fadeIn(fadeArgs).play();
	};
	
	var stopDemo = function(){
		
		var duration = 1500;
		
		dojo.style("overlayer", "opacity", "1");
	      var fadeArgs = {
	        node: "overlayer",
	        duration: duration,
	      };
	      dojo.fadeOut(fadeArgs).play();
	      	      
	      setTimeout( function(){dojo.style("overlayer", "z-index", "0");}, duration );
	};